<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding:0;margin:0;}
        .box{
            width: 600px;
            margin:50px auto;
        }
        input{
            width: 400px;
            height: 30px;
            padding-left:5px;
            font:16px/30px microsoft yahei;
        }
        span{
            font:16px/30px microsoft yahei;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text">
    <span>请输入！</span>
</div>
<script>
    //输入名字：两位-四位（利用汉字的unicode编码：\u4e00-\u9fa5）
    var inp=document.getElementsByTagName("input")[0];
    var span=inp.parentNode.children[1];
    inp.onblur=function(){
        var reg1=/^[\u4e00-\u9fa5]{2,4}$/;
        if(reg1.test(this.value)){
            span.style.color="green";
            span.innerHTML="输入成功！";
        }else{
            span.style.color="red";
            span.innerHTML="您输入的为非法字符！";
        }
    }
</script>
</body>
</html>